.forgot-password-page {
  min-height: 100vh;
  background: #f5f5f5;

  .custom-nav {
    background: #fff;
    color: #333;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .nav-content {
      display: flex;
      align-items: center;
      height: 88rpx;
      padding: 0 20rpx;

      .nav-back {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10rpx 20rpx 10rpx 10rpx;
        margin-right: 10rpx;
        
        &:active {
          opacity: 0.5;
        }
        
        .back-icon {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .nav-title {
        flex: 1;
        text-align: center;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        line-height: 88rpx;
      }

      .nav-placeholder {
        width: 68rpx;
      }
    }
  }

  .content {
    height: 100vh;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
  }

  // 提示信息框
  .tips-box {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 24rpx;
    border-radius: 16rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.1);

    .tips-icon {
      font-size: 48rpx;
      margin-right: 20rpx;
    }

    .tips-content {
      flex: 1;

      .tips-title {
        display: block;
        font-size: 28rpx;
        font-weight: 600;
        color: #1976d2;
        margin-bottom: 8rpx;
      }

      .tips-text {
        display: block;
        font-size: 24rpx;
        color: #1976d2;
        opacity: 0.8;
      }
    }
  }

  // 表单区域
  .form-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  }

  .form-item {
    position: relative;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .form-label {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: 500;

      .required {
        color: #ff5252;
        margin-right: 6rpx;
      }
    }

    .form-input {
      width: 100%;
      height: 80rpx;
      padding: 0 80rpx 0 24rpx;
      font-size: 28rpx;
      background: #f8f8f8;
      border-radius: 12rpx;
      border: 2rpx solid #f0f0f0;
      transition: all 0.3s ease;
      box-sizing: border-box;

      &:focus {
        background: #fff;
        border-color: #5cb85c;
        box-shadow: 0 0 0 4rpx rgba(92, 184, 92, 0.1);
      }

      &.sms-input {
        padding-right: 180rpx;
      }
    }

    .sms-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;

      .get-code-btn {
        position: absolute;
        right: 10rpx;
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 36rpx;
        min-width: 160rpx;
        font-size: 24rpx;
        color: #fff;
        background: linear-gradient(135deg, #5cb85c 0%, #4caf50 100%);
        border-radius: 36rpx;
        border: none;
        
        &::after {
          border: none;
        }

        &.disabled {
          background: #ccc;
          color: #999;
        }

        &:not(.disabled):active {
          transform: scale(0.95);
        }
      }
    }

    .form-hint {
      display: block;
      margin-top: 12rpx;
      font-size: 24rpx;
      color: #999;
      line-height: 1.5;
    }

    .eye-icon {
      position: absolute;
      right: 24rpx;
      top: 50%;
      transform: translateY(-50%);
      margin-top: 8rpx;
      width: 44rpx;
      height: 44rpx;
      z-index: 10;
      opacity: 0.5;
      transition: opacity 0.2s ease;

      &:active {
        opacity: 0.8;
      }
    }
  }

  // 安全提示
  .security-tips {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .tip-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .tip-icon {
        color: #5cb85c;
        font-size: 24rpx;
        margin-right: 12rpx;
        font-weight: bold;
      }

      .tip-text {
        font-size: 24rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }

  // 按钮区域
  .button-section {
    margin-top: 60rpx;
  }

  .submit-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #5cb85c 0%, #4caf50 100%);
    color: #fff;
    border: none;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 600;
    box-shadow: 0 8rpx 24rpx rgba(92, 184, 92, 0.3);
    transition: all 0.3s ease;

    &:active:not([disabled]) {
      transform: scale(0.98);
      box-shadow: 0 4rpx 16rpx rgba(92, 184, 92, 0.4);
    }

    &[disabled] {
      background: #ccc;
      box-shadow: none;
      opacity: 0.6;
    }

    &::after {
      border: none;
    }
  }
}

